import React from "react";
import "./Properties.css"
import JqpUtil from "./JqpUtil";
const statusOptions = window.statusOptions;
export default class Properties extends React.Component{
    state = {
        lf:this.props.lf,
        curNode:this.props.curNode
    }
    constructor(props) {
        super(props);
    }
    updateNode(node,lf){
        this.setState({
            curNode:node,
            lf:lf
        })
    }
    onChange(e){
        console.info(this.state.lf.getGraphRawData());
        let value = this.getValue(e);
        const name = e.target.name;
        this.state.curNode.data.properties[name] = value;
        this.setState({
            curNode:this.state.curNode
        });
        let prop = {};

        prop[name] = value;
        if(this.state.curNode.data.type == 'JqpSequenceFlow'){

            this.state.lf.getEdgeModelById(this.state.curNode.data.id).setProperties(prop);
        }else{
            this.state.lf.getNodeModelById(this.state.curNode.data.id).setProperties(prop);
        }

    }

    getProperty(label,name,type,multiple,options){
        const readOnly = window.readOnly || false;
        if(options){
            return <div className={"Properties-Item"} key={name}>
                <label>{label}:</label>
                <select disabled={readOnly} value={this.state.curNode.data.properties[name] || ''} name={name} onChange={(e)=>{this.onChange(e)}} >
                    <option value="">请选择</option>
                    {
                        options.map(({value,label})=><option value={value} >{label}</option>)
                    }
                </select>
            </div>;
        }
        if(type == "textarea"){
            return <div className={"Properties-Item"} key={name}>
                <label>{label}:</label>
                <textarea disabled={readOnly} name={name} value={this.state.curNode.data.properties[name] || ''} onChange={(e)=>{this.onChange(e)}} />
            </div>;
        }
        if(name === "status"){
            return <div className={"Properties-Item"} key={name}>
                <label>{label}:</label>
                <select multiple={multiple} disabled={readOnly}  value={this.getStatusValue(this.state.curNode.data.properties[name] || '',multiple)} name={name} onChange={(e)=>{this.onChange(e)}}  >
                    <option value="">请选择</option>
                    {
                        statusOptions.map(({label,value})=><option key={value} value={value}>{label}</option>)
                    }
                </select>
            </div>;
        }
        return <div className={"Properties-Item"} key={name}>
            <label>{label}:</label>
            <input disabled={readOnly} name={name} value={this.state.curNode.data.properties[name] || ''} onChange={(e)=>{this.onChange(e)}} />
        </div>;
    }
    getStatusValue(value,multiple){
        if(!multiple){
            return value;
        }
        if(value == '' || value == null){
            return [];
        }
        return value.split(",");
    }
    getValue(e){
        if(!e.target.multiple){
            return e.target.value;
        }
        let arr = [];
        for (let i = 0; i < e.target.options.length; i++) {
            let option = e.target.options[i];
            if(option.selected){
                arr.push(option.value);
            }
        }
        return arr.join(",");
    }
    getProperties(arr){
        return <div>{arr.map(({label,name,type,multiple,options})=>this.getProperty(label,name,type,multiple,options))}</div>
    }

    getEditors(){

        const {curNode,lf} = this.state;
        const nodeData = curNode.data;
        const nodeType = nodeData.type;
        let content = null;

        let context = JqpUtil.buildGraphContext(lf.getGraphData());


        if(nodeType == 'JqpStart' || nodeType == 'JqpEnd'){
            //开始节点/结束节点
        }else if(nodeType == 'JqpSequenceFlow'){
            let edge = context.edgeMap[nodeData.id];
            let sourceNode = context.nodeMap[edge.sourceNodeId];
            if(sourceNode.type == 'JqpStart' || sourceNode.type == 'JqpEnd'){
                return null;
            }

            if(sourceNode.type == 'JqpUserTask'){
                //流转节点
                content = this.getProperties([
                    {label:"当前状态",name:"status"},
                    {label:"是否通过",name:"pass",options:[{
                        value:"YES",
                        label:"是"
                    },{
                        value:"NO",
                        label:"否"
                    }]},
                    {label:"前置接口",name:"beforeApi"},
                    {label:"后置接口",name:"afterApi"}
                    //{label:"激活",name:"active"}
                ]);
            }else if(sourceNode.type == 'JqpCondition'){
                //条件流转
                content = this.getProperties([
                    {label:"判断顺序",name:"checkSeq"},
                    {label:"当前状态",name:"status"},
                    {label:"判断类型",name:"checkType",options:[{
                        value:"expression",
                        label:"表达式"
                    },{
                        value:"magic",
                        label:"magicApi"
                    }]},
                    {label:"判断配置",name:"checkConfig",type:"textarea"}
                ]);
            }
        }else if(nodeType == 'JqpUserTask'){
            content = this.getProperties([
                {label:"审核人",name:"users"},
                {label:"审核岗位",name:"positionCodes"},
                {label:"查看表单",name:"viewForm"},
                {label:"当前状态",name:"status",multiple:"multiple"}
                //{label:"激活",name:"active"},
            ]);
        }
        if(!content) return null;
        return <div className={"Properties"}>
            <div className={"Properties-Title"}>属性面板-{this.state.curNode.data.text && this.state.curNode.data.text.value}</div>
            {content}
        </div>;
    }
    render(){
        const showProperties = window.showProperties === false ? false : true;
        if(!showProperties){
            return null;
        }
        return this.state.curNode ?
            this.getEditors() : null
    }
}
